import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { useAuthStore } from './store/auth';

// Layouts
import MainLayout from './layouts/MainLayout';

// Pages
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import Dashboard from './pages/Dashboard';
import AccountCenter from './pages/AccountCenter';

// Components
import ProtectedRoute from './components/ProtectedRoute';

// 功能模块路由
import { CertificatesRouter, SitesRouter, ContainersRouter } from './router';

function App() {
  const { isAuthenticated } = useAuthStore();

  return (
    <ConfigProvider locale={zhCN}>
      <Router>
        <div style={{ minHeight: '100vh' }}>
          <Routes>
            {/* 公开路由 */}
            <Route path="/" element={<HomePage />} />
            <Route path="/login" element={<LoginPage />} />
            <Route path="/register" element={<RegisterPage />} />
            
            {/* 所有应用页面使用MainLayout */}
            <Route
              path="/app"
              element={
                <ProtectedRoute>
                  <MainLayout />
                </ProtectedRoute>
              }
            >
              <Route index element={<Navigate to="/app/dashboard" replace />} />
              
              {/* 主控制台 */}
              <Route path="dashboard" element={<Dashboard />} />
              
              {/* 证书中心模块 - 使用新的路由组件 */}
              <Route path="certificates/*" element={<CertificatesRouter />} />
              
              {/* 站点管理模块 - 使用新的路由组件 */}
              <Route path="sites/*" element={<SitesRouter />} />
              
              {/* 容器服务模块 - 使用新的路由组件 */}
              <Route path="containers/*" element={<ContainersRouter />} />
              
              {/* 其他功能页面 */}
              <Route path="analytics" element={
                <div style={{ textAlign: 'center', padding: '0 50px 50px' }}>
                  <h2 style={{ fontSize: '24px', fontWeight: 600, color: '#333', marginBottom: '8px' }}>统计分析</h2>
                  <p style={{ color: '#666' }}>统计分析功能正在开发中...</p>
                </div>
              } />
              
              {/* 账号管理页面 */}
              <Route path="account/*" element={<AccountCenter />} />
              
              {/* 管理员功能 */}
              <Route path="admin/users" element={
                <ProtectedRoute requireAdmin>
                  <div style={{ textAlign: 'center', padding: '0 50px 50px' }}>
                    <h2 style={{ fontSize: '24px', fontWeight: 600, color: '#333', marginBottom: '8px' }}>用户管理</h2>
                    <p style={{ color: '#666' }}>用户管理功能正在开发中...</p>
                  </div>
                </ProtectedRoute>
              } />
              <Route path="admin/settings" element={
                <ProtectedRoute requireAdmin>
                  <div style={{ textAlign: 'center', padding: '0 50px 50px' }}>
                    <h2 style={{ fontSize: '24px', fontWeight: 600, color: '#333', marginBottom: '8px' }}>系统设置</h2>
                    <p style={{ color: '#666' }}>系统设置功能正在开发中...</p>
                  </div>
                </ProtectedRoute>
              } />
            </Route>
            
            {/* 404 页面 */}
            <Route
              path="*"
              element={
                <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f5f5f5' }}>
                  <div style={{ textAlign: 'center' }}>
                    <h1 style={{ fontSize: '72px', fontWeight: 'bold', color: '#333', margin: 0 }}>404</h1>
                    <p style={{ fontSize: '20px', color: '#666', margin: '16px 0' }}>页面未找到</p>
                    <button
                      onClick={() => window.history.back()}
                      style={{
                        marginTop: '24px',
                        background: '#1890ff',
                        color: 'white',
                        padding: '8px 16px',
                        borderRadius: '6px',
                        border: 'none',
                        cursor: 'pointer',
                        fontSize: '14px'
                      }}
                    >
                      返回上一页
                    </button>
                  </div>
                </div>
              }
            />
          </Routes>
        </div>
      </Router>
    </ConfigProvider>
  );
}

export default App;
